<template>
	<view class="py-1 px-2 border mr-2 mb-2 d-inline-block" :style="setStyle">{{ item.name }}</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: () => {}
		},
		iShowColor: {
			type: Boolean,
			default: () => true
		}
	},
	computed: {
		setStyle() {
			if (!this.iShowColor) return 'border:0;background:#F5F5F5;';
			let color = {
				borderColor: ['#EEA6AA', '#DD6A4B', '#98D5D8', '#9DBE93', '#BCCD99'],
				background: ['#F8EAE9', '#FFBEC6', '#E8F6F6', '#E4F5E2', '#F2F6E8']
			};
			const len = color.background.length;
			const i = Math.floor(Math.random() * len);
			return `border-color:${color.borderColor[i]};background:${color.background[i]};`;
		}
	}
};
</script>

<style></style>
